<template>
    <aside :class="[{ collapsed }]" @click.self="toggleSidebar()" @scroll.stop>                       
        <ul @click.stop>
            <li v-for="item in menuList" :key="item.text" @click.stop="handleMenuClick(item)">
                {{ item.text }}
            </li>
        </ul>
    </aside>
</template>

<script>
export default {
  name: 'SidebarLeft',
  data() {
    return {
      menuList: [
        { text: '首页', route: '/首页' },
        { text: '消息', route: '/每日一闻' },
        { text: '感悟', route: '/感悟' },
        { text: '教学', route: '/教学' },
        { text: '分类', route: '/分类' },
        { text: '个人中心', route: '/个人中心' },
        { text: '体验馆', route: '/体验页' }
      ],
      collapsed: false
    }
  },
  methods: {
    toggleSidebar: function() {
        this.collapsed = !this.collapsed;
    },
    handleMenuClick(item) {
      this.$router.push(item.route)
    }
  }
}
</script>

<style scoped>
aside{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 260px;
    background-color: rgb(119, 3, 3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: fixed;
    z-index: 1;
    margin-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain; /* 阻止滚动链 */
    -webkit-overflow-scrolling: touch; /* 解决ios下拉动不流畅 */
    touch-action: pan-y; /* 允许垂直滚动 */
}
aside-header .logo{
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
}
.logo a{
    font-size: 25px;
}
aside ul {
    display: flex;
    margin-top: 60px;
    padding-inline-start: 23px;
    flex-direction: column;
    justify-content: space-between;
}
aside li {
    position: relative;
    list-style-type: none;
    font-size: 16px;
    font-family: '楷体';
    margin-bottom: 40px;
    color: #eee;
}
aside li::before {
    display: inline-block;
    content: '';
    position: relative;
    width: 24px;
    height: 24px;
    left: 0;
    transform: translateY(+20%);
    background-repeat: no-repeat;
    margin-right: 15px;
    background-size: contain;
}
.collapsed {
    display: flex; 
    align-items: center;
    width: 70px;
    overflow: hidden;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    height: 100vh;
}
.collapsed .logo{
    display: flex;
    flex-direction: column;
    align-items: center; 
    height: 230px;
}
.collapsed .logo a{
    display: flex;
    flex-direction: column;
    text-align: center;
    writing-mode: vertical-rl;
    text-decoration: upright;
    font-size: 20px;
}
.collapsed .logo img{
    width: 24px;
    height: 24px; 
}
.collapsed ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin-top: 60px;
}
.collapsed li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    font-size: 12px;
    margin-bottom: 10px;
}
.collapsed li::before{
    content: '';
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    margin-right: 0;
    margin-bottom: 12px;
}
/* 为每个菜单项设置不同图标 */
aside li:nth-child(1)::before {
    background-image: url('@/assets/homepage/home.png');
}
aside li:nth-child(2)::before {
    background-image: url('@/assets/homepage/news.png');
}
aside li:nth-child(3)::before {
    background-image: url('@/assets/homepage/blog.png');
}
aside li:nth-child(4)::before {
    background-image: url('@/assets/homepage/onlineteach.png');
}
aside li:nth-child(5)::before {
    background-image: url('@/assets/homepage/fenlei.png');
}
aside li:nth-child(6)::before {
    background-image: url('@/assets/homepage/wode.png');
}
aside li:nth-child(7)::before {
    background-image: url('@/assets/homepage/VR.png');
}

</style>